import React, { Component } from 'react';
import { message } from 'antd';
import { Modal, Button, Icon } from 'antd-mobile';

import api from '../../../api';
// import toInsuranceByAds from '../../common/ToInsuranceByAds';

import vouCher from '../../../states/images/push1.png'
import CCVDCheck from '../../../states/images/CCVDCheck.png'
import d_eva from '../../../states/images/d_eva.png'
import iconInsurance from '../../../states/images/icon-insurance.png'
import iconCheck from '../../../states/images/icon-check.png'
import iconDoctor from '../../../states/images/icon-doctor.png'
import noService from '../../../states/images/no_service.png';
const aty = [
    { name: '查保障', id: 'insuranceList', path: '', pic: iconInsurance, done: true },
    { name: '找医生', id: 'doctorService', path: '', pic: iconDoctor, done: true },
    { name: '做体检', id: 'checkService', path: '', pic: iconCheck, done: true },
    { name: '心脑风险评估', id: 'CCVDCheck', path: '', pic: CCVDCheck, done: true },
    { name: '用药评估', id: 'drugCheck', path: '', pic: d_eva, done: true },
    { name: '上传用药记录', id: 'pushVoucher', path: '', pic: vouCher, done: true },
]

export default class TaskBanner extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isMemberVisible: false,
        }
    }

    toInsurance() {
        if (!this.props.patientId) {
            window.location.href = `/user/bind?r=${encodeURIComponent(`/newHealthHomePage`)}`
        }
        // toInsuranceByAds()
        // 修改为购买服务
        this.props.history.push(`/InsuranceBuy`);
    }

    async goHref(data) {
        const insuranceList = this.props.patientId ? await api.get(`/patient/insurance_order/inservice`, { patientId: this.props.patientId }) : null;
        const isCheckService = insuranceList && insuranceList.length ? insuranceList.find(i => i.products && i.products.length ? i.products.find(j => j.insuranceProductType === 2) : false) : null;
        const isHealthService = insuranceList && insuranceList.length ? insuranceList.find(i => i.products && i.products.length ? i.products.find(j => j.insuranceProductType === 3) : false) : null;
        const isVideoService = insuranceList && insuranceList.length ? insuranceList.find(i => i.products && i.products.length ? i.products.find(j => j.insuranceProductType === 4) : false) : null;
        const projectType = insuranceList && insuranceList.length ? insuranceList.find(i => (i.projectType === 2 || i.projectType === 1)) : null
        /*先判断用户有没有绑定，没有绑定，让用户绑定*/
        if (!this.props.patientId) {
            window.location.href = `/user/bind?r=${encodeURIComponent(
                `/newHealthHomePage`
            )}`;
            return
        }
        switch (data.id) {
            case 'insuranceList':
                const new_insuranceList = this.props.patientId
                    ? await api.get(`/get_insurance_team_order`, {
                        patientId: this.props.patientId,
                    })
                    : null;
                if (new_insuranceList && new_insuranceList.length > 0) {
                    this.props.history.push('/ensureList');
                } else {
                    this.setState({ isMemberVisible: true });
                }
                break;
            case 'doctorService':
                if (isVideoService) {
                    this.props.history.push(`/myDoctor`)
                } else {
                    this.setState({ isMemberVisible: true });
                }
                break;
            case 'checkService':
                if (isCheckService) {
                    this.props.history.push(`/reportList?id=${this.props.patientId}`)
                } else {
                    this.setState({ isMemberVisible: true });
                }
                break;
            case 'myDrugs':
                this.props.history.push(`/medicineHomePage`)
                break;
            case 'CCVDCheck':
                if (isHealthService) {
                    this.props.history.push(`/redirect/miniProgram`)
                } else {
                    this.setState({ isMemberVisible: true });
                }
                break;
            case 'drugCheck':
                if (isHealthService) {
                    this.props.history.push(`/drugEvaluation`)
                } else {
                    this.setState({ isMemberVisible: true });
                }
                break;
            case 'pushVoucher':
                if (projectType) {
                    this.props.history.push(`/newMedicineCredentials`)
                } else {
                    this.setState({ isMemberVisible: true });
                }
                break;
            default:
                message.warning('功能尚未开放');
        }
    }

    render() {
        return <div className="task">
            <Modal
                visible={this.state.isMemberVisible}
                transparent
                maskClosable={false}
                onClose={() => { this.setState({ isMemberVisible: false }) }}
                className="IsNotMemberModal"
            >
                <div
                    className="colseIcon"
                    onClick={() => { this.setState({ isMemberVisible: false }) }}
                >
                    <Icon type="cross-circle" />
                    <div className="_close_bottom"></div>
                </div>
                <div className="_modal_body">
                    <div className="_modal_title">
                        您不含此项权益，若要添加此服务，请点击购买
                </div>
                    <img src={noService} className="_modal_img" alt='立即购买' />
                    <Button className="_modal_btn" onClick={() => this.toInsurance()}>立即购买</Button>
                </div>
            </Modal>
            <div className="title" style={{ marginTop: '8px', paddingLeft: '11px', paddingTop: '16px' }}>会员服务</div>
            <div className="taskBox">
                <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', paddingBottom: 10 }}>
                    {aty.map((i, index) => {
                        return (
                            <div
                                style={{
                                    width: '33.3%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', paddingBottom: i.done ? 14 : 0,
                                }}
                                onClick={() => this.goHref(i)}
                                key={index}
                            >
                                <div className="imgBox" style={{ width: '52%', marginBottom: '12px' }}>
                                    <div
                                        className="_tempImg"
                                        style={{
                                            background: `url(${i.pic})  no-repeat`,
                                            backgroundSize: 'cover',
                                            width: '100%',
                                            paddingTop: '100%'
                                        }}
                                    >
                                    </div>
                                </div>
                                <p style={{ marginBottom: 0, textAlign: 'center', color: i.done ? '#222222' : '#b2b2b2', fontSize: 14, lineHeight: '16px' }}>{i.name}</p>
                                {i.done ? '' : <p style={{ marginBottom: 0, textAlign: 'center', color: '#b2b2b2', fontSize: 14, lineHeight: '16px' }}>尚未开放</p>}
                            </div>
                        )
                    })}
                </div>
            </div>
        </div>
    }
}
